<html>
    <head>
        <title>默认页面</title>
        <link rel="stylesheet" href="../../assets/bundle.element.css">
        <link rel="stylesheet" href="../../style.css">

        <style>
            body{
                background: #F0F2F6;
            }

            .page-main{
                margin: 20px;
            }

            .user-info{
                border: solid 0px red;
            }

            .user-info .img{
                width: 100px;
                height: 100px;
                border: solid 0px blue;
                float: left;
                margin-top: 0px;
                margin-right: 10px;
                border-radius: 3px;
                overflow: hidden;
            }

            .user-info .img img{
                width: 100%;
            }

            .user-info .user{
                float: left;
                border: solid 0px blue;
                margin-top: 0px;
                font-size: 12px;
            }

            .user-info .user h6{
                margin-top: 5px;
                margin-bottom: 20px;
            }

            .alarm-item{
                border: solid 0px red;
                text-align: center;
            }

            .alarm-item i{
                font-size: 14px;
                border: solid 1px #cccccc;
                border-radius: 50%;
                padding: 10px;
                background: #F7FBFF;
            }

            .alarm-item .number{
                margin-top: 5px;
                margin-bottom: 5px;
            }

            .alarm-item .tit{
                color: #cccccc;
                margin-top: 0px;
            }


            .outer-box .tit{
                margin: 0px;
                margin-bottom: 10px;
                border-bottom: solid 1px #cccccc;
                padding-bottom: 5px;
            }

            .outer-box .item{
                text-align: center;
                width: 180px;
                border-bottom: solid 1px rgb(231, 231, 231);
                margin: 10px;
                display: inline-table;
                padding-bottom: 10px;
            }

            .outer-box .item i{
                font-size: 25px;
                color: #237AE4;
            }

            .chart-outer{
                border: solid 0px red;
                padding: 0px 0px 10px 0px;
            }

            .copyright{
                position:fixed;
                bottom: 2px;
                right: 20px;
                border: solid 0px red;
                color: #c4c4c4;
            }


        </style>
    </head>
    <body>
        <div class="page" id="page-vue">
            <div class="page-main">
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-card style="height:140px;">
                        <div class="user-info">
                            <div class="img">
                                <img src="../../imgs/th-company.jpg" />
                            </div>
                            <div class="user">
                                   <h6>用户名：123123</h6>
                                   <p>本次登录：2019-10-23 11:22:22</p>
                                    <p>上次登录：2019-10-23 11:22:22</p>

                            </div>
                        </div>
                        </el-card>
                    </el-col>
                    <el-col :span="16">
                        <el-card style="height:140px;">
                            <el-row>
                                <el-col :span="5">
                                    <div class="alarm-item">

                                        <i class="el-icon-edit" style="color:#237AE4;"></i>
                                        <p class="number">3</p>
                                        <p class="tit">待审批件</p>
                                    </div>
                                </el-col>
                                <el-col :span="5">
                                        <div class="alarm-item">

                                                <i class="el-icon-phone" style="color:#02DB72;"></i>
                                                <p class="number">3</p>
                                                <p class="tit">能源消费量异常</p>
                                            </div>
                                </el-col>
                                <el-col :span="5">
                                        <div class="alarm-item">

                                                <i class="el-icon-tickets" style="color:#9D35FF;"></i>
                                                <p class="number">3</p>
                                                <p class="tit">单耗异常</p>
                                            </div>
                                </el-col>
                                <el-col :span="5">
                                        <div class="alarm-item">

                                                <i class="el-icon-news" style="color:#E84740;"></i>
                                                <p class="number">3</p>
                                                <p class="tit">能源强度异常</p>
                                            </div>
                                </el-col>
                                <el-col :span="4">
                                        <div class="alarm-item">

                                                <i class="el-icon-message"></i>
                                                <p class="number">30</p>
                                                <p class="tit">异常信息</p>
                                            </div>
                                </el-col>
                            </el-row>
                        </el-card>
                    </el-col>
                </el-row>

                <el-row :gutter="20" style="margin-top:20px;">
                    <el-col :span="14">
                        <el-card>
                            <div class="chart-outer" style="height:250px;">
                                <h6>重要图表</h6>
                                <chart-line v-bind:data="chartOption"></chart-line>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="10">
                            <el-card>
                                <div class="outer-box" style="height:280px;">
                                    <h6 class="tit">常用功能</h6>
                                    <div class="item">
                                        <i class="el-icon-sort"></i>
                                        <p class="name">企业申报进度汇总表</p>
                                    </div>

                                    <div class="item">
                                            <i class="el-icon-document"></i>
                                            <p class="name">企业申报进度明细表</p>
                                        </div>

                                        <div class="item">
                                                <i class="el-icon-edit"></i>
                                                <p class="name">月报审核</p>
                                            </div>
                                            <div class="item">
                                                    <i class="el-icon-check"></i>
                                                    <p class="name">企业能耗排行</p>
                                                </div>
                                </div>
                            </el-card>
                    </el-col>
                </el-row>

                <div class="copyright">浙江省能源监察总队能源利用状况综合管理系统    ©2019 技术支持：杭州开地信息科技</div>

            </div>
        
        
        </div>
 


        <script type='text/javascript' src='../../assets/bundle.js' charset='utf-8'></script>
        <script type='text/javascript' src='../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='../../assets/echarts.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='../../js/common.js' charset='utf-8'></script>
        <script type='text/javascript' src='../../js/component.js' charset='utf-8'></script>

        <script>

            var vuePage=new Vue({
                el:'#page-vue',
                data:{
                    day:'',
                    tableData:[],
                    chartOption:{}
                },
                methods:{
                    search:function(){
                        
                    },

                    onCheckbox:function(row){

                    }



                },
                created:function(){

                    //this.day = TimeUtil.convertToString(new Date()).substr(0,10);
                    
                },
                mounted:function(){
                   
                    this.chartOption={
                        title: '能耗分类图',
                            x: ['1','2','3','4','5','6','7','8','9','10'],
                            y: [
                                { name: '电', value: [100,200,233,123,455,521,222,444,333,400] },
                                { name: '水', value: [1000,400,333,423,455,521,222,844,333,500] },
                                { name: '煤', value: [800,500,433,123,155,621,922,544,533,600] },
                            ]
                    };
                    
                    

                }
            });


        </script>

    </body>
</html>